<template>
    <div>
      <div style="margin-bottom: 10px">
        <Row>
          <Col span="4">
            <div v-if="documentLxNum != '' && documentSjNum != ''">
              <div>理想使用要件数：{{documentLxNum}}</div>
              <div>实际使用要件数：{{documentSjNum}}</div>
            </div>
            <div v-else><Spin></Spin></div>
          </Col>
          <Col span="20">
            <template>
              <Input v-model="item_name" placeholder="请输入事项名称" style="width: 300px" clearable @on-clear="buttonClear"/>
              <Button type="primary" @click="buttonClick" style="margin-left: 10px">搜索</Button>
            </template>
          </Col>
        </Row>
      </div>
      <Table v-if="showTable" border :columns="columns" :data="data" :loading="tableLoading">
        <template slot-scope="{ row, index }" slot="action">
          <Button type="primary" size="small" style="margin-right: 5px" @click="getDetail(row)" :loading="row.buttonLoading">查看详情</Button>
        </template>
      </Table>
      <Modal
        width="1200"
        v-model="modal"
        :title="title">
        <Row>
          <Col span="10">
            <Table border :columns="columns1" :data="resultList"></Table>
          </Col>
          <Col span="14">
            <div ref="echartPie" style="width: 800px; height: 400px;text-align: center"></div>
          </Col>
        </Row>
      </Modal>
    </div>
</template>

<script>
import { findItemDocumentList, findItemDocumentNumList } from '../../../../api/eventlist'
import echarts from 'echarts'

export default {
  name: 'document-tab',
  props: {
    documentLxNum: {
      type: Number,
      default: null
    },
    documentSjNum: {
      type: Number,
      default: null
    }
  },
  data () {
    return {
      columns: [
        {
          title: '事项编号',
          key: 'id',
          align: 'center'
        },
        {
          title: '事项名称',
          key: 'text',
          align: 'center'
        },
        {
          title: '操作',
          slot: 'action',
          width: 300,
          align: 'center'
        }
      ],
      data: [],
      Loading: true,
      tableLoading: false,
      modal: false,
      row: {},
      columns1: [
        {
          title: '要件名称',
          key: 'name',
          align: 'center'
        },
        {
          title: '数量',
          key: 'value',
          align: 'center'
        }
      ],
      resultList: [],
      title: '',
      showTable: true,
      item_name: ''
    }
  },
  methods: {
    init () {
      this.tableLoading = true
      let data = {
        item_name: this.item_name
      }
      findItemDocumentList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.data = ret.data.data
          this.data.forEach(item => {
            item.buttonLoading = false
          })
          this.showTable = false
          this.$nextTick(() => {
            this.showTable = true
          })
          this.tableLoading = false
        } else {
          this.$Notice.error({ title: '获取信息失败', desc: ret.data.errmsg })
        }
      })
    },
    getDetail (e) {
      console.log(e)
      e.buttonLoading = true
      this.row = e
      this.title = e.text
      let data = {
        item_id: e.id
      }
      findItemDocumentNumList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.resultList = ret.data.data
          if (this.resultList.length > 0) {
            this.modal = true
            e.buttonLoading = false
            // pie
            this.$nextTick(() => {
              this.setOpotionPie()
            })
          } else {
            e.buttonLoading = false
            this.$Notice.error({ title: '查询结果为空！', desc: '该事项所需要件未查询到电子证照！' })
          }
        } else {
          this.$Notice.error({ title: '获取信息失败', desc: ret.data.errmsg })
        }
      })
    },
    setOpotionPie () {
      let tempDom = echarts.init(this.$refs.echartPie)
      let option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '50%'],
            data: this.resultList,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      tempDom.setOption(option)
    },
    buttonClear () {
      this.item_name = ''
    },
    buttonClick () {
      this.init()
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style scoped>

</style>
